<template>
  <div>
       <p>
          <CounterView :counter="count" @onIncreament='increament($event)'/>
          <!-- {{count}} -->
       </p>
       <el-button type="primary" @click="jumpText">
           跳转
       </el-button>
        <router-link to='/'> Home</router-link>
      <router-link to='/ab'>Contact </router-link>
      <!--  <el-button type="primary" @click="increament(2)">
           确定
       </el-button> -->
       <!-- <el-button type="primary" @click="increment">
           加一
       </el-button>
       <el-button type="primary" @click="decrement">
           减一
       </el-button> -->
  </div>
</template>

<script>
import {
		reactive , toRefs,ref,computed,watch,getCurrentInstance
	} from 'vue'
  import CounterView from '../components/CounterView.vue'
export default {
  name:'Home',
  components:{
    CounterView
  },
 setup() { 
    const { ctx } = getCurrentInstance()
   const jumpText = ()=>{

   }
   //定义数据
      //  const cou = ref(2) 
       //定义方法
			//  const increment = () => {
			// 	cou.value += 1;
			// }
			
			// const decrement = () => {
			// 	cou.value -= 1;
			// } 
      // const count = ref(0)
    /*   const state = reactive({
        count:0
      }) */
      // const { count } = toRefs(state)
   /*    setTimeout(() => {
       state.count++ 
      }, 1000); */
     /*  const count = ref(1)
      const double = computed(()=>{return count.value * 2})
      
      setTimeout(() => {
        count.value++
      }, 1000); */
			// 不具备数据响应式的效果，1s 后数据没有任何变化
    /* const state = reactive({
      count:0,
      double:computed(()=>state.count*2)
    })
    setTimeout(() => {
      state.count++
    }, 1000); */
      const count = ref(1000)
      console.log(count.value);
      /* const add = (()=>{
        count.value++
      })
      watch(count,(count,prevCount)=>{
        console.log(count,prevCount);
      }) */
      const increament = (num)=>{
        console.log(num);
        count.value+= num
      }
			 return { count  ,increament ,jumpText}
		}

}

</script>
<style lang='scss' scoped>
</style>